<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>简易计算器</title>
        <script src="bootstrap-3.3.7-dist/js/jquery-3.4.1.min.js"></script>
        <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
        <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<style>
        #Show {
                background: none;
                border: none;
                text-align: right;
        }

        .panel {
                position: absolute;
                left: 40%;
                top: 20%;
        }

        button {
                vertical-align: middle;
                margin-top: 10px;
                margin-left: 0;
                padding: 0;
                border: 0;
                font-weight: bolder;
                font-size: xx-large
        }
</style>

<body>
        <div class="panel panel-default">
                <div class="panel-heading">
                        简易计算器
                </div>
                <div class="panel-body">
                        <div class="row">
                                <button class="col-xs-12" id='Show' value="0"></button>
                        </div>
                        <hr>
                        <div class="container-fluid">
                                <div class="row">

                                        <div class="col-xs-3 col-md-3 col-sm-3"><button class="btn btn-default btn-lg"
                                                        id='7' onclick='Num(this)'>7</button></div>
                                        <div class="col-xs-3 col-md-3 col-sm-3"><button class="btn btn-default btn-lg"
                                                        id='8' onclick='Num(this)'>8</button></div>
                                        <div class="col-xs-3 col-md-3 col-sm-3"><button class="btn btn-default btn-lg"
                                                        id='9' onclick='Num(this)'>9</button></div>
                                        <div class="col-xs-3 col-md-3 col-sm-3"><button class="btn btn-default btn-lg"
                                                        id='/' onclick='Num(this)' style="color: orange">÷</button>
                                        </div>

                                </div>
                                <div class="row">
                                        <div class="col-xs-3 col-md-3 col-sm-3"><button class="btn btn-default btn-lg"
                                                        id='4' onclick='Num(this)'>4</button></div>
                                        <div class="col-xs-3 col-md-3 col-sm-3"><button class="btn btn-default btn-lg"
                                                        id='5' onclick='Num(this)'>5</button></div>
                                        <div class="col-xs-3 col-md-3 col-sm-3"><button class="btn btn-default btn-lg"
                                                        id='6' onclick='Num(this)'>6</button></div>
                                        <div class="col-xs-3 col-md-3 col-sm-3"><button class="btn btn-default btn-lg"
                                                        id='*' onclick='Num(this)' style="color: orange">×</button>
                                        </div>

                                </div>
                                <div class="row">
                                        <div class="col-xs-3 col-md-3 col-sm-3"><button class="btn btn-default btn-lg"
                                                        id='1' onclick='Num(this)'>1</button></div>
                                        <div class="col-xs-3 col-md-3 col-sm-3"><button class="btn btn-default btn-lg"
                                                        id='2' onclick='Num(this)'>2</button></div>
                                        <div class="col-xs-3 col-md-3 col-sm-3"><button class="btn btn-default btn-lg"
                                                        id='3' onclick='Num(this)'>3</button></div>
                                        <div class="col-xs-3 col-md-3 col-sm-3"><button class="btn btn-default btn-lg"
                                                        id='-' onclick='Num(this)' style="color: orange">-</button>
                                        </div>
                                </div>
                                <div class="row">
                                        <div class="col-xs-3 col-md-3 col-sm-3"> <button class="btn btn-default btn-lg"
                                                        id='C' onclick='Clear()' style="color: orange">C</button></div>
                                        <div class="col-xs-3 col-md-3 col-sm-3"> <button class="btn btn-default btn-lg"
                                                        id='0' onclick='Num(this)'>0</button></div>
                                        <div class="col-xs-3 col-md-3 col-sm-3"> <button class="btn btn-default btn-lg"
                                                        id='=' onclick='Eval()' οnblur='Clear()'
                                                        style="color: orange">=</button></div>
                                        <div class="col-xs-3 col-md-3 col-sm-3"> <button class="btn btn-default btn-lg"
                                                        id='+' onclick='Num(this)' style="color: orange">+</button>
                                        </div>
                                </div>

                        </div>
                </div>
                <div class="panel-footer">
                        ©2019 <a href="https://www.baidu.com/s?tn=80035161_2_dg&wd=simeon">Simeon</a>
                </div>
        </div>
        <script type="text/javascript">
                function Num(obj) {
                        document.getElementById('Show').innerText += obj.id;
                }
                function Clear() {
                        document.getElementById('Show').innerText = null;
                }
                function Eval() {

                        var Evals = document.getElementById('Show').innerText;
                        document.getElementById('Show').innerText = eval(Evals);
                }
        </script>
</body>